<template>
    <div id="selectAddress">
        <div class="selectAddressContainer">
        	<ul class="selectAddressStep">
        		<li class="active">地址确认</li>
        		<li>查看订单</li>
        		<li>支付</li>
        		<li>订单确认</li>
        	</ul>
        	<span class="el-dialog__title">配送地址</span>

        	<el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="6" :lg="6" v-for="(addressDataItem,index) in filterAddress">
            <div class="grid-content" :class="{'active':index==currentIndex}" @click="currentIndex=index">
            <p>{{addressDataItem.name}}</p>
            <p>{{addressDataItem.address}}</p>
            <p>{{addressDataItem.phone}}</p>
            <p class="moren" v-show="addressDataItem.moren">默认地址</p>
            <p class="setMoren" v-show="!addressDataItem.moren" @click="setDefault(addressDataItem.addressId)">设为默认</p>

            <i class="el-icon-edit"></i>
            <i class="el-icon-delete2" @click="delAddress(addressDataItem)"></i>
            </div>
            </el-col>

            <el-col :xs="24" :sm="12" :md="6" :lg="6">
            <div class="grid-content">
            <i class="el-icon-plus"></i>
            <span>添加新地址</span>
            </div>
            </el-col>
          </el-row>

        	<div class="moreCtrl" @click="lookmore()" v-show="!Less">More</div>
        	<div class="moreCtrl" @click="lookless()" v-show="Less">Less</div>

	        <span class="el-dialog__title">配送方式</span>

        	<el-row :gutter="10" class="sentMethodContent">
        		<el-col :xs="24" :sm="12" :md="{span: 6, offset: 6}" :lg="{span: 6, offset: 6}">
        			<div class="sentMethods" :class="{'active':sentMethodsActive==0}" @click="sentMethodsActive=0">
        			标准配送
        			<p>Free</p>
        			</div>
        		</el-col>
        		<el-col :xs="24" :sm="12" :md="{span: 6, offset: 0}" :lg="{span: 6, offset: 0}">
        			<div class="sentMethods" :class="{'active':sentMethodsActive==1}" @click="sentMethodsActive=1">
        			高级配送
        			<p>$180</p>
        			</div>
        		</el-col>
        	</el-row>

      	  <el-button type="danger" class="addressBtn">下一步</el-button>

          <el-dialog title="删除当前地址" v-model="dialogVisible" size="tiny">
            <span>确定删除吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="delAddressResult()">确 定</el-button>
            </span>
          </el-dialog>

  </div>
  </div>
</template>

<script>
export default{
    name: 'selectAddress',
    data () {
    	return {
      		addressData:[],
      		limitNum: 3,
      		Less: false,
      		currentIndex: 0,
      		setMoren: false,
      		dialogVisible: false,
      		delAddressItem: '',
      		sentMethodsActive: 0,
   	    }
    },
    computed: {
    	filterAddress: function(){
    		return this.addressData.slice(0,this.limitNum);
    	}
    },
    mounted (){
    	this.getAddressData();
    },
    methods: {
    	getAddressData: function(){
    		this.$http.get('static/data/addressData.json').then((response) => {
                   this.addressData= response.body;
                })
                .catch(function(response) {
                    console.log(response)
                })
    	},
    	lookmore: function(){
    		this.limitNum = this.addressData.length;
    		this.Less = true;
    	},
    	lookless: function(){
    		this.Less = false;
    		this.limitNum = 3;
    	},
    	setDefault: function(addressId){
    		this.addressData.forEach(function(item,index){
    			if(item.addressId == addressId){
    				item.moren = true;
    			}else{
    				item.moren = false;
    			}
    		})
    	},
    	delAddress: function(addressDataItem){
    		this.delAddressItem = addressDataItem;
        	this.dialogVisible = true;
    	},
    	delAddressResult: function(){
    		let index = this.addressData.indexOf(this.delAddressItem);
        	this.addressData.splice(index,1);
         	this.dialogVisible = false;
    	}
    }
    }
</script>

<style>

.selectAddressContainer .el-dialog__title{
		margin: 20px 0;
		display: block;
}
.grid-content{
	border: 1px solid #ddd;
	padding: 10px;
	border-radius: 4px;
	font-size: .85rem;
	line-height: 1.4rem;
	position: relative;
	    margin-bottom: 10px;
	        height: 90px
}
.grid-content p{
	text-align: left;
}
.moren{
	color: #cf7600;
}
.grid-content .el-icon-edit{
	    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 18px;
     display: none;
}
.grid-content .el-icon-delete2{
	 position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 18px;
    display: none;
}
.active .el-icon-delete2,.active .el-icon-edit{
	display: block;
}
.grid-content .el-icon-plus{
	display: block;
	font-size: 25px;
	line-height: 60px;
}
.moreCtrl,.setMoren{
	color: #cf7600;
}
.selectAddressContainer .el-row .active{
	border-color: #cf7600;
}

.setMoren{
	display: none
}
.active .setMoren{
	display: block;
}
.sentMethods{
	border:1px solid #ddd;
	border-radius: 4px;
	padding: 10px;
	line-height: 24px;
}
.grid-content:hover,.sentMethods:hover{
	border: 1px solid #cf7600;
}
.sentMethodContent .active{
	border: 1px solid #cf7600;	
}
.addressBtn{
	margin: 20px 0;
}
.selectAddressStep{
		counter-reset: li;
		height: 80px;
	}
	.selectAddressStep li{
	display: block;
    width: 25%;
    border-bottom: 3px solid #ddd;
    float: left;
    padding: 10px 0;
    position: relative;
    color: #ccc;
	}
	.selectAddressStep li:before {
        background-color: #ddd;
    border-radius: 15px;
    color: #fff;
    content: counter(li);
    counter-increment: li;
    font-size: 11px;
    height: 15px;
    left: 50%;
    bottom: -8px;
    line-height: 15px;
    position: absolute;
    text-align: center;
    width: 15px;
    margin-left: -7px;
}
	.selectAddressStep .active{
		color: #cf7600;
		border-bottom: 3px solid #cf7600;
	}
	.selectAddressStep .active:before{
		background-color: #cf7600;
	}


	@media (min-width: 1200px){
		.selectAddressContainer {
    width: 1160px;
    margin: 0 auto;
    padding-left: 50px;
}
	}


 @media (min-width: 992px) and (max-width: 1199px){
.selectAddressContainer{
      margin: 0 30px;
    }
 
  }

   @media (min-width: 768px) and (max-width: 991px){

.selectAddressContainer{
      margin: 0 30px;
    }
 

   }
@media (max-width: 767px){
	.selectAddressContainer{
      margin: 0 10px;
    }
    .selectAddressStep{
    	font-size: 12px;
    }
    .sentMethods {
    margin-bottom: 10px; 
}
}
	
</style>